<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div id="childApp">


<div>
    <div class="d-flex flex-wrap">
        <div class="col-12 fb-24 mb-4">UNIS logo</div>
        <div class="col-12">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4 bg-disabled btn"><img src="./img/svgs/logomark.svg" alt=""></div>
                <div class=" ml-4">Logomark</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4  btn"><img src="./img/svgs/unis-logo-color.svg" alt=""></div>
                <div class=" ml-4">Color</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4 bg-disabled btn"><img src="./img/svgs/unis-logo-white.svg" alt=""></div>
                <div class=" ml-4">White</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4  btn"><img src="./img/svgs/unis-logo-black.svg" alt=""></div>
                <div class=" ml-4">Black</div>
            </div>
        </div>
    </div>
    <div class="d-flex flex-wrap">
        <div class="col-12 fb-24 mb-4 mt-4">Opera8 Logo</div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4  btn"><img src="./img/svgs/opera8-logo-color.svg" alt=""></div>
                <div class=" ml-4">Color</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4 bg-disabled btn"><img src="./img/svgs/opera8-logo-white.svg" alt=""></div>
                <div class=" ml-4">White</div>
            </div>
        </div>
        <div class="col-4">
            <div class="clearfix bshadow0 pbs mb-3 d-flex align-items-end">
                <div class="p-4  btn"><img src="./img/svgs/opera8-logo-black.svg" alt=""></div>
                <div class=" ml-4">Black</div>
            </div>
        </div>
    </div>
</div>
<div class="d-flex flex-wrap" style="margin-top: 45px;">
    <div class="col-12 fb-24 mb-4 d-flex justify-content-between "><span>Illustrations</span> <a class="btn btn-primary" href="./dist/svgs.zip" download="svgs.zip">Svgs (svgs.zip)</a></div>

    <div class="col-2" v-for="item in 26">
        <div class="clearfix bshadow0 pbs  d-flex align-items-center">
            <div class="p-4  btn"><img :src="'./img/svgs/ills-'+item+'.svg'" alt=""></div>
            <div class=" ml-4">ills-{{item}}.svg</div>
        </div>
    </div>
</div>

</div>
<script type="text/javascript">

  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: ''
      }
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
</body>
</html>